<template>
  <div class="content-view">
    <pageHead> </pageHead>

    <div class="table-body">
      <Tables ref="tables" :columns="gridOption.columns" :value="gridOption.data">
      </Tables>
    </div>

    <editModal ref="editModal" width="60" :columns="gridOption.editColumns">
      <div slot="bottom">
        <fieldItem name='前端控件类型' style="width:90%;">
          <frontEndControlType v-model="editRow.control" ref="frontEndControlType" @changeOption="changeOption"></frontEndControlType>
        </fieldItem>
      </div>
    </editModal>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import formFieldServer from '@/api/system_high/formFieldServer'
import formServer from '@/api/system_high/formServer'
import uiTool from '@/libs/uiTool'

import databaseType from './com/databaseType'
import frontEndControlType from './com/frontEndControlType'

export default {
  name: 'tables_page',
  components: {
    databaseType,
    frontEndControlType,
  },

  data() {
    let $this = this
    let editColumns = [
      {
        title: '表单id',
        key: 'form_id',
        disabled: true,
        com: 'Select',
        source: [],
        render(h, param) {
          let row = param.column.source.find((p) => parseInt(p.key) === parseInt(param.row.form_id))
          if (row) {
            return <span>{row.value}</span>
          }
        },
      },
      {
        title: '字段key',
        key: 'key',
        disabled: true,
        placeholder: '例: user_id',
        render(h, param) {
          let field = param.row.field
          if (field) {
            return <span>{field.key}</span>
          }

          return <span>-</span>
        },
      },
      { title: '字段名称', key: 'model_field_name', placeholder: '例: 用户名称' },

      {
        title: '是否显示在编辑界面',
        key: 'is_show_edit',
        com: 'Radio',
        source: [
          { key: 0, value: '否' },
          { key: 1, value: '是' },
        ],
        render(h, params) {
          let str = params.row.is_show_edit ? '是' : '否'
          return <span>{str}</span>
        },
      },
      {
        title: '编辑界面禁用',
        key: 'is_edit_disable',
        com: 'Radio',
        source: [
          { key: 0, value: '否' },
          { key: 1, value: '是' },
        ],
        render(h, params) {
          let str = params.row.is_edit_disable ? '是' : '否'
          return <span>{str}</span>
        },
      },

      {
        title: '是否显示在列表',
        key: 'is_show_list',
        com: 'Radio',
        source: [
          { key: 0, value: '否' },
          { key: 1, value: '是' },
        ],
        render(h, params) {
          let str = params.row.is_show_list ? '是' : '否'
          return <span>{str}</span>
        },
      },
      {
        title: '是否显示在搜索',
        key: 'is_show_seach',
        com: 'Radio',
        source: [
          { key: 0, value: '否' },
          { key: 1, value: '是' },
        ],
        render(h, params) {
          let str = params.row.is_show_seach ? '是' : '否'
          return <span>{str}</span>
        },
      },

      {
        title: '排序',
        key: 'sort',
        com: 'InputNumber',
        render(h, params) {
          let row = params.row
          return h('div', { class: 'sort-num' }, [
            h('Icon', {
              props: { type: 'md-arrow-up' },
              on: {
                click: () => {
                  $this.sortUp(row)
                },
              },
            }),
            h('Icon', {
              props: { type: 'md-arrow-down' },
              on: {
                click: () => {
                  $this.sortDown(row)
                },
              },
            }),
          ])
        },
      },
    ]
    return {
      form_id: '',
      editRow: {},
      gridOption: {
        editColumns,
        columns: [
          { title: 'id', key: 'id', width: '80px', is_show_edit: 0 },
          ...editColumns,
          {
            title: '前端控件',
            key: 'control',
            render(h, params) {
              let control = typeof params.row.control === 'string' ? JSON.parse(params.row.control) : params.row.control
              return (
                <div>
                  <div> 类型：{control.comType}</div>
                </div>
              )
            },
          },
          {
            title: '操作',
            key: 'action',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditModal(params.row)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  },
                },
              ]

              return uiTool.getBtn(h, btns)
            },
          },
        ],
        data: [],
      },
    }
  },
  computed: {
    ...mapGetters({
      shopList: 'shop/shopList',
    }),
  },
  created() {
    let params = this.$route.params
    if (params && params.id) {
      this.form_id = parseInt(params.id)
    }
    this.initCol()
    this.init()
  },
  watch: {},
  methods: {
    async init() {
      let form_id = this.form_id
      let res = await formFieldServer.all({ form_id })
      this.gridOption.data = res.data
    },

    async initCol() {
      let res = await formServer.all()
      let row = this.gridOption.columns.find((p) => p.key === 'form_id')
      if (row) {
        row.source = res.data.map((p) => {
          let { id, name } = p
          return { key: id, value: name }
        })
      }
    },
    changeOption(option) {
      Object.keys(option).forEach((key) => {
        this.editRow[key] = option[key]
      })
    },

    showEditModal(row) {
      let form_id = this.form_id
      this.editRow = row
      if (row.control) {
        this.editRow.control = typeof row.control === 'string' ? JSON.parse(row.control) : row.control
      } else {
        row.control = { comType: 'Input' }
      }

      if (row.field) {
        this.editRow.key = row.field.key
      }

      this.$refs.editModal.editShow(this.editRow, async (newRow) => {
        let control = JSON.stringify(this.editRow.control)
        let data_type = this.editRow.data_type

        await formFieldServer.edit(Object.assign({}, newRow, { form_id, control, data_type }))
        rootVue.$Message.success('修改成功！')

        this.init()
      })
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await formFieldServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },

    async sortUp(row) {
      let { id, sort } = row
      if (sort >= 1) {
        await formFieldServer.edit({ id, sort: sort - 1 })
        this.init()
      } else {
        this.$Message.error('排序不能在小')
      }
    },
    async sortDown(row) {
      let { id, sort } = row
      await formFieldServer.edit({ id, sort: sort + 1 })
      this.init()
    },
  },
}
</script>
